<template>
    <button @click="changeEmp">改变员工信息</button>
    <br>
  员工名字：<input v-model="emp.name" type="text">
    <hr>
    <button @click="changeStudent">改变学生信息</button>
    <br>
  学生年龄：<input v-model="student.age" type="number">
</template>

<script>
export default {
    data: () => ({
        emp: {
            name: 'Jack', // 名字
            salary: 7000 // 薪水
        },
        student: {
            name: 'Tom', // 名字
            age: 18 // 年龄
        }
    }),
    watch: { // 侦听器
        emp: { // 侦听 emp 对象数据源
            handler(newData, oldData) {// 默认的浅层次的侦听器：只有侦听的数据源的值发生变化时，才会触发 handler 函数，而改变侦听的数据源中的嵌套属性值并不会出发该函数
                console.log('员工的新旧值：')
                console.log(newData)
                console.log(oldData)
            }
        },
        student: {
            deep: true, // 深度侦听：如果改变侦听对象中的嵌套属性值，也会触发 handler 函数，但是 newData 和 oldData 是相等的
            handler(newData, oldData) { // 只有改变侦听对象的值时，newData 和 oldData 才是不相等的
                console.log('学生的新旧值：')
                console.log(newData)
                console.log(oldData)
            }
        }
    },
    methods: {
        changeEmp() {
            this.emp = {
                name: 'Annie',
                salary: 3200
            }
        },
        changeStudent() {
            this.student = {
                name: 'Drew',
                age: 32
            }
        }
    }
}
</script>